<template>
    <div class="container">
        <video muted="muted" src="../../assets/video/bg-video.d2d602a9.mp4" loop="loop" autoplay="autoplay" class="video">
        </video>
        <div class="bg2"></div>
        <div class="box">
            <h1>千锋管理系统</h1>
            <div class="sum">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
            <el-input class='ps' type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
            <el-input v-model.number="ruleForm.captcha" type="text"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" class="butn">提交</el-button>
            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
        </el-form>
            </div>
        </div>
    </div>
</template>

<script>
// 声明3个常规校验函数
// 校验验证码
var validateCaptcha = (rule, value, callback) => {
        var myreg = /^\d{5}$/;
        if (myreg.test(value)) {
            callback()
        } else {
            callback('请输入5位数验证码')
        }
};
// 校验用户名
var validateUsername = (rule, value, callback) => {
        console.log(rule)
        console.log(value)
        // 3-16字母数字下划线
        var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
        // 如果校验通过，要直接回调callback()
        // 如果校验不通过 callback中传参数
        if (uPattern.test(value)) {
            callback()
        } else {
            callback('3-16字母数字下划线')
        }
};
// 校验密码
var validatePassword = (rule, value, callback) => {
        var num = /^[0-9_-]{3,16}$/;
        if (num.test(value)) {
            callback()
        } else {
            callback('请输入3-16位密码')
        }
};
export default {
    data() {
      return {
        ruleForm: {
          username: '',
          password: '',
          captcha: ''
        },
        rules: {
          username: [
            { validator: validateUsername, trigger: 'blur' }
          ],
          password: [
            { validator: validatePassword, trigger: 'blur' }
          ],
          captcha: [
            { validator: validateCaptcha, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
  }
</script>


<style lang="less" scoped>
    // 修改element-ui的样式
    // 1.打开调试器，找准类名，覆盖样式
    // 2.看权重，使用important
    // 3.使用深度选择器 >>>  /deep/  v::deep
.el-input {
    /deep/ .el-input__inner {
        width: 280px;
        height: 45px;
    }
}
.video {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.bg2 {
    background-image: url(http://chst.vip:8081/crm/assets/img/bg2.fc58c850.png);
    background-repeat: no-repeat;
    position: fixed;
    width: 20%;
    height: 40%;
    background-size: 100% 100%;
    left: 20%;
    top: 40%;
    opacity: 0.5;
    text-align: center;
    color: #fff;
}

.box { 
    width: 450px;
    height: 650px;
    // background: red;
    position: fixed;
    text-align: center;
    top: 250px;
    right: 200px;
    color: #fff;
    background-color: rgba(0,0,0,.3)
}
.sum {
    box-sizing: border-box;
    padding-top: 50px;
    padding-right: 70px;
    margin-right: 60px;
}
h1 {
    box-sizing: border-box;
    padding-top: 100px;
}

.butn {
    width: 280px;
    margin: 20px;
    position: absolute;
    left: -20px;
}
/deep/ .el-form-item__label {
    color: #fff;
    padding-top: 4px;
}





</style>